import React from 'react'
import { FormGroup, Button, Form, Col, Checkbox, ControlLabel, FormControl } from 'react-bootstrap'

class LoginForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: '', 
      passwd: ''
    }
  }

  handleNameChange (e) {
    this.setState({name: e.target.value})
  }
  handlePasswdChange (e) {
    this.setState({passwd: e.target.value})
  }

  handleSubmit (e) {
    e.preventDefault()
    if (this.state.name && this.state.passwd)
      this.props.loginUser(this.state.name, this.state.passwd)
    else
      alert('请填写用户名和密码')
  }
  
  render () {
    return(
    <Col xs={12}>
      <br/><br/><br/>
      <Col xs={6} xsOffset={3}>
        <Form onSubmit={(e) => { this.handleSubmit(e) }} horizontal>
          <FormGroup controlId="formHorizontalEmail">
            <Col componentClass={ControlLabel} sm={3}>
              用户名
            </Col>
            <Col sm={9}>
              <FormControl type="text" placeholder="" value={this.state.name}
                onChange={(e) => { this.handleNameChange(e) }}/>
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalPassword">
            <Col componentClass={ControlLabel} sm={3}>
              密码
            </Col>
            <Col sm={9}>
              <FormControl type="password" placeholder="Password" value={this.state.passwd} 
                onChange={(e) => { this.handlePasswdChange(e) }}/>
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={5} sm={10}>
              <Button type="submit">
                登录
        </Button>
            </Col>
          </FormGroup>
        </Form>
      </Col>
    </Col>
  )
  }
}

export default LoginForm